<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">    
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href="css/jquery.slideBox.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="js/jquery.slideBox.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript"> 
$(function(){
	$('#demo1').slideBox();
});	
</script>
<style type="text/css">
 body,td,div
 {
   font-size:12px;
 }
 #demo1 img{
 	width:280px;
 	height:210px;
 }
</style>
</head>
<body>
<jsp:include page="top.jsp"></jsp:include>
<div id="middle">
	<div id="middle_left">
		<div id="picnews">
			<div id="demo1" class="slideBox">
			  <ul class="items">
			    <c:forEach items="${picnewss}" var="picnews" varStatus="row">   
			    <li><a href="page_queryPicnews.action?picnews_id=${picnews.picnews_id}" title="${picnews.picnews_title}"><img src="images/hdtp/${picnews.picnews_picture}"></a></li>
			    </c:forEach>
			  </ul>
			</div>
		</div>
		<div id="info">
			<div class="titleBg">最新新闻</div>
			<div class="info_con">
					<ul>
					  <c:forEach items="${newss1}" var="news" varStatus="status">
					  <li>
						<div>
							<div class="info_text">
								<a href="page_queryNews.action?news_id=${news.news_id}" target="_blank" title="${news.news_title}">
									${fn:length(news.news_title)>24?fn:substring(news.news_title,0,22):news.news_title}..
								</a>
							</div>
							<div class="info_time">[${fn:substring(news.news_date,0,10)}]</div>
						</div>
					  </li>
					  </c:forEach>
					</ul>
			</div>
		</div>
		<div id="school">
			<div class="titleBg">校园风光</div>
			<div class="school_con" id="school_con">
				<ul>
					<li>
						<img src="images/xyfg/1.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/2.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/3.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/4.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/5.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/6.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/7.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/8.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/9.jpg" width="210" height="190">
					 </li>
					 <li>
						<img src="images/xyfg/10.jpg" width="210" height="190">
					 </li>
				</ul>
			</div>
<script type="text/javascript">
	//滚动插件
	(function($){
		$.fn.extend({
			ScrollLeft:function(opt,callback){
					//参数初始化
					if(!opt) var opt={};
					var _this=this.eq(0).find("ul:first");
					var colW=_this.find("li:first").width(), //获取行宽
						col=opt.col?parseInt(opt.col,3):parseInt(this.width()/colW,3), //每次滚动的行数，默认为一屏，即父容器高度
						speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
						timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
					if(col==0) col=3;
					var leftWidth=0-col*colW-20;
					//滚动函数
					scrollLeft=function(){
							_this.animate({
									marginLeft:leftWidth
							},speed,function(){
									for(i=1;i<=col;i++){
											_this.find("li:first").appendTo(_this);
									}
									_this.css({marginLeft:0});
							});
					}
					//鼠标事件绑定
					_this.hover(function(){
							clearInterval(timerID);
					},function(){
							timerID=setInterval("scrollLeft()",timer);
					}).mouseout();
			}       
		});
	})(jQuery);
	
	$(document).ready(function(){
		$("#school_con").ScrollLeft({col:1,speed:1000,timer:3000});
	});
</script>
		</div>
		<div class="infos1">
			<div class="titleBg">
				<div class="titleBg_text">社团活动</div>
				<div class="titleBg_more"><a href="page_listActivitys.action" target="_blank">More>></a></div>
			</div>
			<div class="infos_con">
				<ul>
					<c:forEach items="${activitys1}" var="activity">
					<li>
						${fn:substring(activity.activity_date,0,10)}&nbsp;
						<a href="page_queryActivity.action?activity_id=${activity.activity_id}" target="_blank" title="${activity.activity_title}">
							${fn:length(activity.activity_title)>18?fn:substring(activity.activity_title,0,18):activity.activity_title}..
						</a>
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="infos2">
			<div class="titleBg">
				<div class="titleBg_text">校园活动</div>
				<div class="titleBg_more"><a href="page_listActivitys.action" target="_blank">More>></a></div>
			</div>
			<div class="infos_con">
				<ul>
				    <c:forEach items="${activitys2}" var="activity">
					<li>
						${fn:substring(activity.activity_date,0,10)}&nbsp;
						<a href="page_queryActivity.action?activity_id=${activity.activity_id}" target="_blank" title="${activity.activity_title}">
							${fn:length(activity.activity_title)>18?fn:substring(activity.activity_title,0,18):activity.activity_title}..
						</a>
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="infos1">
			<div class="titleBg">
				<div class="titleBg_text">社团新闻</div>
				<div class="titleBg_more"><a href="page_listNewss.action" target="_blank">More>></a></div>
			</div>
			<div class="infos_con">
				<ul>
				    <c:forEach items="${newss2}" var="news">
					<li>
						${fn:substring(news.news_date,0,10)}&nbsp;
						<a href="page_queryNews.action?news_id=${news.news_id}" target="_blank" title="${news.news_title}">
							${fn:length(news.news_title)>18?fn:substring(news.news_title,0,18):news.news_title}..
						</a>
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="infos2">
			<div class="titleBg">
				<div class="titleBg_text">校园新闻</div>
				<div class="titleBg_more"><a href="page_listNewss.action" target="_blank">More>></a></div>
			</div>
			<div class="infos_con">
				<ul>
					<c:forEach items="${newss3}" var="news">
					<li>
						${fn:substring(news.news_date,0,10)}&nbsp;
						<a href="page_queryNews.action?news_id=${news.news_id}" target="_blank" title="${news.news_title}">
							${fn:length(news.news_title)>18?fn:substring(news.news_title,0,18):news.news_title}..
						</a>
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
		<div class="infos3">
			<div class="titleBg3">
				<div class="titleBg_text">留言信息</div>
				<div class="titleBg_more"><a href="page_listSblogs.action" target="_blank">More>></a></div>
			</div>
			<div class="infos_con">
				<ul>
					<c:forEach items="${sblogs}" var="sblog">
					<li>
						<a href="page_listSblogs.action" target="_blank" title="${sblog.sblog_title}">
							${fn:length(sblog.sblog_title)>18?fn:substring(sblog.sblog_title,0,18):sblog.sblog_title}..
						</a>&nbsp;
						[ ${fn:length(sblog.sblog_content)>30?fn:substring(sblog.sblog_content,0,30):sblog.sblog_content}...　${fn:substring(sblog.sblog_date,0,19)} ]
					</li>
					</c:forEach>
				</ul>
			</div>
		</div>
	</div>
	<div id="middle_right">
		<div id="note">
			<div class="titleBg">校园社团</div>
			<div class="note_con" id="note_con">
				<ul>
				  <c:forEach items="${colleges}" var="college">
				  <li>
					<a href="page_queryCollege.action?college_id=${college.college_id}" target="_blank" title='${college.college_name}'>
						<img width="200" height="113" src='images/sttp/${college.college_pic}'/>
						<br/>${college.college_name}
					</a>
				  </li>
				  </c:forEach>
				</ul>
			</div>
<script type="text/javascript">
	//滚动插件
	(function($){
		$.fn.extend({
			Scroll:function(opt,callback){
					//参数初始化
					if(!opt) var opt={};
					var _this=this.eq(0).find("ul:first");
					var lineH=_this.find("li:first").height(), //获取行高
						line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
						speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
						timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
					if(line==0) line=1;
					var upHeight=0-line*lineH;
					//滚动函数
					scrollUp=function(){
							_this.animate({
									marginTop:upHeight
							},speed,function(){
									for(i=1;i<=line;i++){
											_this.find("li:first").appendTo(_this);
									}
									_this.css({marginTop:0});
							});
					}
					//鼠标事件绑定
					_this.hover(function(){
							clearInterval(timerID);
					},function(){
							timerID=setInterval("scrollUp()",timer);
					}).mouseout();
			}       
		});
	})(jQuery);
	
	$(document).ready(function(){
		$("#note_con").Scroll({line:1,speed:500,timer:4000});
	});
</script>
		</div>
		<div id="friendlink">
			<div class="titleBg">友情链接</div>
			<div class="friendlink_con">
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/1.jpg"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/2.png"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/3.jpg"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/4.png"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/5.jpg"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/6.png"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/7.png"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/8.png"/></a>
				<a href="http://www.zzu.edu.cn/" target="_blank"><img src="images/yqlj/9.png"/></a>
			</div>
		</div>
	</div>
</div>
<jsp:include page="bottom.jsp"></jsp:include>
</body>
</html>